<template>
  <div class="flex_cm container" style="height: 100%">
    <search
      :form_data="top_index == 1 ? header_list : header_list_1"
      @changeIsShow="
        (e) => {
          top_index == 1
            ? (header_list[e].isShow = !header_list[e].isShow)
            : (header_list_1[e].isShow = !header_list_1[e].isShow);
          top_index == 1
            ? (header_list[e].value =
                header_list[e].type == 'input_number' ? ['', ''] : '')
            : (header_list_1[e].value =
                header_list_1[e].type == 'input_number' ? ['', ''] : '');
        }
      "
      @search="search_key"
      @reset="
        header_list.forEach((item) => {
          item.value = '';
        }),
          header_list_1.forEach((item) => {
            item.value = '';
          }),
          search_key()
      "
    ></search>
    <div class="p_0_10 bg_fff flex1">
      <div class="flex_js p_10_0">
        <div class="flex cp fw">
          <div
            :class="top_index == 1 ? 'c_3580eb' : ''"
            @click="
              (top_index = 1),
                header_list.forEach((item) => {
                  item.value = '';
                }),
                header_list_1.forEach((item) => {
                  item.value = '';
                }),
                search_key();
            "
          >
            错误率配置
          </div>
          <span class="m_0_10">|</span>
          <div
            :class="top_index == 2 ? 'c_3580eb' : ''"
            @click="
              (top_index = 2),
                header_list.forEach((item) => {
                  item.value = '';
                }),
                header_list_1.forEach((item) => {
                  item.value = '';
                }),
                search_key();
            "
          >
            周期奖罚配置
          </div>
        </div>
        <div class="flex">
          <el-button
            type="primary"
            @click="top_index == 1 ? (show_box = true) : (show_add_box = true)"
            >新增</el-button
          >
          <setTable
            :data="top_index == 1 ? header_list : header_list_1"
            :height_size="height_size"
            @changeShowTable="
              (e) => {
                top_index == 1
                  ? (header_list[e].showTable = !header_list[e].showTable)
                  : (header_list_1[e].showTable = !header_list_1[e].showTable);
              }
            "
            @resetTableSet="
              () => {
                top_index == 1
                  ? header_list.forEach((item) => {
                      item.showTable = true;
                    })
                  : header_list_1.forEach((item) => {
                      item.showTable = true;
                    });
              }
            "
            @changeHeightSize="
              (e) => {
                height_size = e;
              }
            "
          ></setTable>
        </div>
      </div>
      <el-table
        v-if="top_index == 1"
        style="text-align: center"
        :data="list"
        :max-height="max_height"
        border
        v-loading="loading"
        :row-style="{
          height: height_size == 1 ? '58px' : height_size == 2 ? '48px' : '38px',
        }"
        :cell-style="{
          padding: height_size == 3 ? '0' : '',
        }"
      >
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column
          label="错误率范围开始（‰）"
          prop="rangeStart"
          key="错误率范围开始（‰）"
          sortable
          v-if="header_list[0].showTable"
        ></el-table-column>
        <el-table-column
          label="错误率范围结束（‰）"
          prop="rangeEnd"
          key="错误率范围结束（‰）"
          sortable
          v-if="header_list[1].showTable"
        ></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <!-- <el-button @click="edit_list({item:scope.row,type:1})">详情</el-button> -->
            <el-button @click="edit_list({ item: scope.row, type: 1 })">编辑</el-button>
            <el-button @click="edit_list({ item: scope.row, type: 2 })">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-else
        style="text-align: center"
        :data="list"
        :max-height="max_height"
        border
        v-loading="loading"
        :row-style="{
          height: height_size == 1 ? '58px' : height_size == 2 ? '48px' : '38px',
        }"
        :cell-style="{
          padding: height_size == 3 ? '0' : '',
        }"
      >
        <el-table-column type="index" label="序号" width="80px"></el-table-column>
        <el-table-column
          label="标题"
          prop="title"
          key="标题"
          sortable
          v-if="header_list_1[0].showTable"
        ></el-table-column>
        <el-table-column
          label="类型"
          key="类型"
          sortable
          v-if="header_list_1[1].showTable"
        >
          <template #default="scope">
            <div v-for="item in type_list" :key="item.value">
              <span v-if="scope.row.type == item.value">{{ item.label }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="错误率范围开始（‰）"
          prop="wrongRateStart"
          key="错误率范围开始（‰）"
          sortable
          v-if="header_list_1[2].showTable"
        ></el-table-column>
        <el-table-column
          label="错误率范围结束（‰）"
          prop="wrongRateEnd"
          key="错误率范围结束（‰）"
          sortable
          v-if="header_list_1[3].showTable"
        ></el-table-column>
        <el-table-column
          label="时间周期"
          prop="title"
          key="时间周期"
          sortable
          v-if="header_list_1[4].showTable"
        >
          <template #default="scope">
            <div v-for="item in cycleType_list" :key="item.value">
              <span v-if="scope.row.cycleType == item.value">{{ item.label }}</span>
            </div>
          </template></el-table-column
        >
        <el-table-column
          label="执行周期"
          prop="title"
          key="执行周期"
          sortable
          v-if="header_list_1[5].showTable"
        >
          <template #default="scope">
            <div v-for="item in executeTimeType_list" :key="item.value">
              <span v-if="scope.row.executeTimeType == item.value">{{ item.label }}</span>
            </div>
          </template></el-table-column
        >
        <el-table-column
          label="对象"
          prop="title"
          key="对象"
          sortable
          v-if="header_list_1[6].showTable"
        >
          <template #default="scope">
            <div v-for="item in memberType_list" :key="item.value">
              <span v-if="scope.row.memberType == item.value">{{ item.label }}</span>
            </div>
          </template></el-table-column
        >
        <el-table-column
          label="判断类型"
          prop="title"
          key="判断类型"
          sortable
          v-if="header_list_1[7].showTable"
        >
          <template #default="scope">
            <div v-for="item in judgeType_list" :key="item.value">
              <span v-if="scope.row.judgeType == item.value">{{ item.label }}</span>
            </div>
          </template></el-table-column
        >
        <el-table-column
          label="次数"
          prop="times"
          key="次数"
          sortable
          v-if="header_list_1[8].showTable"
        ></el-table-column>
        <el-table-column
          label="金额类型"
          prop="title"
          key="金额类型"
          sortable
          v-if="header_list_1[9].showTable"
        >
          <template #default="scope">
            <div v-for="item in amountType_list" :key="item.value">
              <span v-if="scope.row.amountType == item.value">{{ item.label }}</span>
            </div>
          </template></el-table-column
        >
        <el-table-column
          label="固定金额"
          prop="amount"
          key="固定金额"
          sortable
          v-if="header_list_1[10].showTable"
        ></el-table-column>
        <el-table-column
          label="固定比例"
          prop="proportion"
          key="固定比例"
          sortable
          v-if="header_list_1[11].showTable"
        ></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button @click="edit_list({ item: scope.row, type: 3 })">编辑</el-button>
            <el-button @click="edit_list({ item: scope.row, type: 4 })">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      v-model="show_box"
      direction="rtl"
      size="65%"
      destroy-on-close
      :close-on-click-modal="false"
      @close="resetForm(taskWrongForm)"
    >
      <template #title>
        <h4 v-if="add_form_data.id == ''">新增</h4>
        <h4 v-else>编辑</h4>
      </template>
      <template #default>
        <el-form
          :model="add_form_data"
          ref="taskWrongForm"
          :rules="rules"
          label-width="140"
        >
          <div class="flex">
            <el-form-item label="错误率范围(‰)" prop="rangeStart">
              <el-input
                type="number"
                v-model="add_form_data.rangeStart"
                placeholder="请输入最小值"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <span class="m_0_20">-</span>
            <el-input
              type="number"
              v-model="add_form_data.rangeEnd"
              style="width: 200px"
              placeholder="请输入最大值"
            ></el-input>
          </div>
          <el-form-item label="处罚配置">
            <div v-for="(item, index) in add_form_data.detailList" class="m_right20">
              <div class="">
                <span class="div_label">处罚对象</span>
                <span v-if="item.memberType == '1'">设计成员</span
                ><span v-if="item.memberType == '2'">设计经理</span
                ><span v-if="item.memberType == '3'">设计组长</span>
              </div>
              <div class="p_top10">
                <span class="div_label">金额类型</span>
                <el-select v-model="item.amountType">
                  <el-option :value="'1'" label="固定金额"></el-option>
                  <el-option :value="'2'" label="固定比例"></el-option>
                </el-select>
              </div>
              <el-form-item
                label="金额"
                label-width="74"
                v-if="item.amountType == '1'"
                :prop="`detailList.${index}.amount`"
                :rules="rules.amount"
              >
                <el-input v-model="item.amount" type="number" placeholder="请输入">
                </el-input>
              </el-form-item>
              <el-form-item
                label="比例(%)"
                label-width="74"
                v-else
                :prop="`detailList.${index}.proportion`"
                :rules="rules.proportion"
              >
                <el-input v-model="item.proportion" type="number" placeholder="请输入">
                </el-input>
              </el-form-item>
            </div>
          </el-form-item>
          <div class="tr m_top10">
            <el-button @click="resetForm(taskWrongForm)">取消</el-button>
            <el-button
              type="primary"
              @click="submit(taskWrongForm)"
              :loading="btn_loading"
              >确定</el-button
            >
          </div>
        </el-form>
      </template>
    </el-drawer>
    <el-drawer
      v-model="show_add_box"
      direction="rtl"
      size="65%"
      destroy-on-close
      :close-on-click-modal="false"
      @close="resetForm(taskWrongForm)"
    >
      <template #title>
        <h4 v-if="add_rewardPunish_form_data.id == ''">新增</h4>
        <h4 v-else>编辑</h4>
      </template>
      <template #default>
        <el-form
          :model="add_rewardPunish_form_data"
          ref="taskWrongForm"
          :rules="rules"
          label-width="140"
        >
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="add_rewardPunish_form_data.title"
              placeholder="请输入标题"
            ></el-input
          ></el-form-item>

          <el-form-item label="对象">
            <el-select v-model="add_rewardPunish_form_data.memberType">
              <el-option
                v-for="item in memberType_list"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间周期">
            <el-select v-model="add_rewardPunish_form_data.cycleType">
              <el-option
                v-for="item in cycleType_list"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="执行周期">
            <el-select v-model="add_rewardPunish_form_data.executeTimeType">
              <el-option
                v-for="item in executeTimeType_list"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="判断类型">
            <el-select v-model="add_rewardPunish_form_data.judgeType">
              <el-option
                v-for="item in judgeType_list"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="flex m_bottom10">
            <el-form-item
              label="错误率范围(‰)"
              prop="wrongRateStart"
              style="margin: 0; padding: 0"
            >
              <el-input
                type="number"
                v-model="add_rewardPunish_form_data.wrongRateStart"
                placeholder="请输入最小值"
                style="width: 200px"
              ></el-input
            ></el-form-item>
            <span class="m_0_20">-</span>
            <el-input
              type="number"
              v-model="add_rewardPunish_form_data.wrongRateEnd"
              placeholder="请输入最大值"
              style="width: 200px"
            ></el-input>
          </div>
          <el-form-item label="次数(>=)">
            <el-input
              v-model="add_rewardPunish_form_data.times"
              placeholder="请输入次数"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="add_rewardPunish_form_data.type">
              <el-option
                v-for="item in type_list"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额类型">
            <el-select v-model="add_rewardPunish_form_data.amountType">
              <el-option
                v-for="item in amountType_list"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="金额"
            v-if="add_rewardPunish_form_data.amountType == '1'"
            prop="amount"
          >
            <el-input
              v-model="add_rewardPunish_form_data.amount"
              type="number"
              placeholder="请输入金额"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="比例(%)" v-else prop="proportion">
            <el-input
              v-model="add_rewardPunish_form_data.proportion"
              type="number"
              placeholder="请输入比例"
            >
            </el-input>
          </el-form-item>
          <div class="tr m_top10">
            <el-button @click="resetForm(taskWrongForm)">取消</el-button>
            <el-button
              type="primary"
              @click="submit(taskWrongForm)"
              :loading="btn_loading"
              >确定</el-button
            >
          </div>
        </el-form>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import search from "@/view/components/search.vue";
import setTable from "@/view/components/setTable.vue";
import { onMounted, ref, onUnmounted, reactive } from "vue";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import EventBus from "@/utils/EventBus";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const taskWrongForm = ref<FormInstance>();
const validate = (rule, value, callback) => {
  console.log(rule, value, callback);
  if (value == "") {
    callback(new Error("值不可为空"));
  }
  if (value < 0) {
    callback(new Error("值不可小于0"));
  } else {
    callback();
  }
};
const rules = reactive({
  rangeStart: [{ required: true, validator: validate, trigger: "blur" }],
  wrongRateStart: [{ required: true, validator: validate, trigger: "blur" }],
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  proportion: [{ required: true, validator: validate, trigger: "blur" }],
  amount: [{ required: true, validator: validate, trigger: "blur" }],
});
const top_index = ref(1);

const type_list = ref([
  { value: "1", label: "奖励" },
  { value: "2", label: "处罚" },
]);
const amountType_list = ref([
  { value: "1", label: "固定金额" },
  { value: "2", label: "固定比例" },
]);
const executeTimeType_list = ref([
  { value: "1", label: "当前周期" },
  { value: "2", label: "下个周期" },
]);
const cycleType_list = ref([
  { value: "3", label: "月度" },
  { value: "2", label: "季度" },
  { value: "1", label: "年度" },
]);
const judgeType_list = ref([
  { value: "1", label: "存在" },
  { value: "2", label: "不存在" },
]);
const memberType_list = ref([
  { value: "1", label: "设计成员" },
  { value: "2", label: "设计经理" },
  { value: "3", label: "设计组长" },
]);
const list = ref();
const max_height = ref();
const loading = ref(false);
const show_box = ref(false);
const show_add_box = ref(false);
const height_size = ref(1);
const header_list = ref<any>([
  {
    label: "错误率范围开始（‰）",
    value: "",
    showTable: true,
    type: "input",
    isShow: true,
    options: [],
  },
  {
    label: "错误率范围结束（‰）",
    value: "",
    showTable: true,
    type: "input",
    isShow: true,
    options: [],
  },
]);
const header_list_1 = ref<any>([
  {
    label: "标题",
    value: "",
    showTable: true,
    type: "input",
    isShow: true,
    options: [],
  },
  {
    label: "类型",
    value: "",
    showTable: true,
    type: "select",
    isShow: true,
    options: type_list.value,
  },
  {
    label: "错误率范围开始（‰）",
    value: "",
    showTable: true,
    type: "input",
    isShow: true,
    options: [],
  },
  {
    label: "错误率范围结束（‰）",
    value: "",
    showTable: true,
    type: "input",
    isShow: true,
    options: [],
  },
  {
    label: "时间周期",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: cycleType_list.value,
  },
  {
    label: "执行周期",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: cycleType_list.value,
  },
  {
    label: "对象",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: memberType_list.value,
  },
  {
    label: "判断类型",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: judgeType_list.value,
  },
  {
    label: "次数(>=)",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
  {
    label: "金额类型",
    value: "",
    showTable: true,
    type: "select",
    isShow: false,
    options: amountType_list.value,
  },
  {
    label: "金额",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
  {
    label: "比例",
    value: "",
    showTable: true,
    type: "input",
    isShow: false,
    options: [],
  },
]);
const page_data = ref<any>({
  rangeStart: "",
  rangeEnd: "",
});
const add_form_data = ref({
  id: "",
  rangeStart: "",
  rangeEnd: "",
  detailList: [
    {
      memberType: "1",
      amountType: "1",
      amount: "",
      proportion: "",
    },
    {
      memberType: "2",
      amountType: "1",
      amount: "",
      proportion: "",
    },
    {
      memberType: "3",
      amountType: "1",
      amount: "",
      proportion: "",
    },
  ],
});
const rewardPunish_page_data = ref({
  title: "",
  type: "",
  wrongRateEnd: "",
  wrongRateStart: "",
  amount: "",
  cycleType: "",
  executeTimeType: "",
  judgeType: "",
  times: "",
  memberType: "",
  amountType: "",
  proportion: "",
  enterpriseId: store.state.enterprise_id,
});
const add_rewardPunish_form_data = ref({
  id: "",
  title: "",
  type: "1",
  cycleType: "3",
  executeTimeType: "1",
  judgeType: "1",
  memberType: "1",
  amountType: "1",
  proportion: "",
  times: "",
  amount: "",
  wrongRateEnd: "",
  wrongRateStart: "",
});
onMounted(() => {
  max_height.value = window.innerHeight - 320; // 带分页的 table 高度
  EventBus.on("refresh", () => {
    get_list();
    ElMessage.success("刷新成功！");
  });
  get_list();
});
onUnmounted(() => {
  EventBus.off("refresh");
});
const edit_list = (e) => {
  console.log(e.item);
  if (e.type == 1) {
    add_form_data.value = {
      id: e.item.id,
      rangeStart: e.item.rangeStart,
      rangeEnd: e.item.rangeEnd,
      detailList: [
        {
          memberType: e.item.detailList[0].memberType,
          amountType: e.item.detailList[0].amountType + "",
          amount: e.item.detailList[0].amount,
          proportion: e.item.detailList[0].proportion,
        },
        {
          memberType: e.item.detailList[1].memberType,
          amountType: e.item.detailList[1].amountType + "",
          amount: e.item.detailList[1].amount,
          proportion: e.item.detailList[1].proportion,
        },
        {
          memberType: e.item.detailList[2].memberType,
          amountType: e.item.detailList[2].amountType + "",
          amount: e.item.detailList[2].amount,
          proportion: e.item.detailList[2].proportion,
        },
      ],
    };
    show_box.value = true;
  } else if (e.type == 3) {
    add_rewardPunish_form_data.value = {
      id: e.item.id,
      title: e.item.title,
      type: e.item.type + "",
      cycleType: e.item.cycleType,
      executeTimeType: e.item.executeTimeType,
      judgeType: e.item.judgeType,
      memberType: e.item.memberType,
      amountType: e.item.amountType + "",
      proportion: e.item.proportion,
      times: e.item.times,
      amount: e.item.amount,
      wrongRateEnd: e.item.wrongRateEnd,
      wrongRateStart: e.item.wrongRateStart,
    };
    show_add_box.value = true;
  } else {
    ElMessageBox.confirm("确定删除该记录？", "", {
      closeOnClickModal: false,
      type: "warning",
    })
      .then(() => {
        axios
          .request({
            url:
              (top_index.value == 1
                ? serviceApi.taskWrongRate
                : serviceApi.taskCycleRewardDeduction) +
              "/" +
              e.item.id,
            method: "delete",
          })
          .then(() => {
            ElMessage.success("操作成功！");
            setTimeout(() => {
              get_list();
            }, 1000);
          })
          .catch((err) => {
            ElMessage.error(err);
          });
      })
      .catch(() => {});
  }
};
const btn_loading = ref(false);
const submit = async (formEl: FormInstance | undefined) => {
  await formEl.validate((valid) => {
    if (valid) {
      if (btn_loading.value) return;
      btn_loading.value = true;
      let url = "";
      if (top_index.value == 1) {
        url =
          serviceApi.taskWrongRate +
          (add_form_data.value.id == "" ? "" : "/" + add_form_data.value.id);
      } else {
        url =
          serviceApi.taskCycleRewardDeduction +
          (add_rewardPunish_form_data.value.id == ""
            ? ""
            : "/" + add_rewardPunish_form_data.value.id);
      }
      axios
        .request({
          url: url,
          method:
            add_form_data.value.id == "" && add_rewardPunish_form_data.value.id == ""
              ? "post"
              : "put",
          data:
            top_index.value == 1 ? add_form_data.value : add_rewardPunish_form_data.value,
        })
        .then(() => {
          ElMessage.success("操作成功！");
          setTimeout(() => {
            btn_loading.value = false;
            resetForm(formEl);
            get_list();
          }, 1000);
        })
        .catch((err) => {
          ElMessage.error(err);
          btn_loading.value = false;
        });
    }
  });
};
const get_list = () => {
  loading.value = true;
  axios
    .request({
      url:
        top_index.value == 1
          ? serviceApi.taskWrongRate + "/list"
          : serviceApi.taskCycleRewardDeduction + "/list",
      method: "post",
      data: top_index.value == 1 ? page_data.value : rewardPunish_page_data.value,
    })
    .then((res) => {
      console.log(res);
      list.value = res.data;
      loading.value = false;
    })
    .catch((err) => {
      ElMessage.error(err);
      loading.value = false;
    });
};
const search_key = () => {
  if (top_index.value == 1) {
    page_data.value = {
      rangeStart: header_list.value[0].value,
      rangeEnd: header_list.value[1].value,
    };
  } else {
    rewardPunish_page_data.value = {
      title: header_list_1.value[0].value,
      type: header_list_1.value[1].value,
      wrongRateStart: header_list_1.value[2].value,
      wrongRateEnd: header_list_1.value[3].value,
      cycleType: header_list_1.value[4].value,
      executeTimeType: header_list_1.value[5].value,
      judgeType: header_list_1.value[6].value,
      times: header_list_1.value[7].value,
      memberType: header_list_1.value[8].value,
      amountType: header_list_1.value[9].value,
      proportion: header_list_1.value[10].value,
      amount: header_list_1.value[11].value,
      enterpriseId: store.state.enterprise_id,
    };
  }

  get_list();
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  add_form_data.value = {
    id: "",
    rangeStart: "",
    rangeEnd: "",
    detailList: [
      {
        memberType: "1",
        amountType: "1",
        amount: "",
        proportion: "",
      },
      {
        memberType: "2",
        amountType: "1",
        amount: "",
        proportion: "",
      },
      {
        memberType: "3",
        amountType: "1",
        amount: "",
        proportion: "",
      },
    ],
  };
  add_rewardPunish_form_data.value = {
    id: "",
    title: "",
    type: "1",
    cycleType: "3",
    executeTimeType: "1",
    judgeType: "1",
    memberType: "1",
    amountType: "1",
    proportion: "",
    times: "",
    amount: "",
    wrongRateEnd: "",
    wrongRateStart: "",
  };
  show_add_box.value = false;
  show_box.value = false;
};
</script>

<style lang="scss" scoped>
.div_label {
  display: inline-block;
  width: 72px;
  text-align: right;
  box-sizing: border-box;
  padding-right: 12px;
}
.top_item {
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  &:hover {
    color: #3580eb;
    border-color: #3580eb;
  }
}
.line {
  background-color: #333;
  width: 1px;
  height: 16px;
  margin: 0 10px;
}
</style>
